@import '@automattic/typography/styles/variables';
@import '../styles/typography';

$banner-title-height: 22px;

:root {
	--font-title-small: 20px;
	--jp-black: #000;
	--jp-gray-5: #dcdcde;
	--jp-red-50: #d63638;
	--jp-yellow-30: #deb100;
	--jp-green: #069e08;
	--spacing-base: 8px;
}
.notice-banner {
	display: flex;
	align-items: flex-start;

	font-size: $font-body;

	background-color: var(--studio-white);

	border: 1px solid var(--jp-black);
	border-radius: 4px;
	border-color: var(--jp-gray-5);
	border-left-width: 6px;

	padding: 24px;

	&.is-info {
		border-left-color: var(--jp-black);

		.notice-banner__icon {
			fill: var(--jp-black);
		}
	}

	// TODO: Move out these two classes to StatsNotices since they are defined and passed there.
	.notice-banner__action-button,
	.notice-banner__action-link {
		font-family: inherit;
		font-size: $font-body;
		font-weight: 600;
		line-height: 24px;
		cursor: pointer;
		margin-top: 20px;
	}

	.notice-banner__action-link {
		color: var(--jp-black);
		font-weight: 600;
		margin-left: 24px;

		&:focus {
			outline: none;
			box-shadow: none;
		}

		&.notice-banner__action-link--inline {
			margin-left: 0;
		}

		& > span {
			border-bottom: 1.5px solid var(--jp-black);
		}

		& > svg {
			margin-left: 4px;
		}
	}

	.notice-banner__action-button {
		background-color: var(--jp-black);
		color: var(--studio-white);
		border-radius: 4px;
		padding: 8px 24px;
	}
}

.notice-banner__icon-wrapper {
	width: calc(var(--spacing-base) * 3);
	height: calc(var(--spacing-base) * 3);
	margin-right: 20px;
	// Align the icon vertically in the middle compared to the title.
	margin-top: calc(($banner-title-height - var(--spacing-base) * 3) / 2);
}

.notice-banner__close-button {
	width: calc(var(--spacing-base) * 3);
	height: calc(var(--spacing-base) * 3);

	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
}

// Mobile layout differences.
@media screen and (max-width: 600px) {
	.notice-banner {
		position: relative;
		padding-top: 68px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
	}

	.notice-banner__icon-wrapper {
		position: absolute;
		top: 24px;
		left: 24px;
	}

	.notice-banner__close-button {
		position: absolute;
		top: 24px;
		right: 24px;
	}
}

.notice-banner__main-content {
	font-family: $font-sf-pro-text;
	flex-grow: 1;
}

.notice-banner__title {
	font-family: $font-sf-pro-text;
	font-weight: 600;
	font-size: $font-body;
	line-height: $banner-title-height;
	margin-bottom: 8px;
}

.notice-banner__action-bar {
	display: flex;
	align-items: center;
	margin-top: 20px;

	a {
		&,
		&:hover,
		&:active,
		&:focus {
			color: var(--jp-black);
		}
	}

	> * {
		margin-right: 24px;
	}
}

.notice-banner.is-error {
	border-color: var(--jp-red-50);

	.notice-banner__icon {
		fill: var(--jp-red-50);
	}
}

.notice-banner.is-warning {
	border-color: var(--jp-yellow-30);

	.notice-banner__icon {
		fill: var(--jp-yellow-30);
	}
}

.notice-banner.is-success {
	border-left-color: var(--jp-green);

	.notice-banner__icon {
		fill: var(--jp-green);
	}

	.notice-banner__action-link {
		color: var(--jp-green);
		text-decoration: underline;
	}


}
